<template>
  <div class="transit-container">
    <div class="add">
      <el-row>
        <el-button type="primary" class="add-template" @click="addData">新增模板</el-button>
      </el-row>
      <ul class="info">
        <li>模板类型</li>
        <li>运送类型</li>
        <li>关联城市</li>
        <li>首重</li>
        <li>续重</li>
        <li>轻抛系数</li>
        <li>操作</li>
      </ul>
    </div>
    <span>江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2022 All Rights
      Reserved 苏ICP备16007882号-11</span>
    <el-dialog
      title="新增模板"
      :visible="showDialog"
      width="35%"
      @close="btnCancel"
    >
      <el-form ref="addForm" label-width="140px" :model="addForm" :rules="addRules">

        <el-form-item label="模板类型" prop="templateType">
          <el-select v-model="addForm.templateType" placeholder="请选择模板类型" style="width:80%" size="mini">
            <!-- 下拉选项 循环 负责人数据 label表示显示的字段, value存储字段 -->
            <el-option v-for="item in templateTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="运送类型" prop="transportType">
          <el-select v-model="addForm.transportType" placeholder="请选择运送类型" style="width:80%" size="mini">
            <el-option v-for="item in transportTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="关联城市" prop="associatedCity" message="">全国</el-form-item>

        <el-form-item label="首重价格" prop="firstPrice">
          <el-input v-model="addForm.firstPrice" placeholder="请输入首重价格" style="width:80%" size="mini">
            <template #append>元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="续重价格" prop="lastPrice">
          <el-input v-model="addForm.lastPrice" placeholder="请输入续重价格" style="width:80%" size="mini">
            <template #append>元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="轻抛系数" prop="lightThrow">
          <el-input v-model="addForm.lightThrow" placeholder="请输入轻抛系数" style="width:80%" size="mini" />
        </el-form-item>

        <el-form-item size="mini">
          <el-button type="primary" @click="btnOk">确定</el-button>
          <el-button @click="btnCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      showDialog: false,
      addForm: {
        templateType: '',
        transportType: '',
        associatedCity: '',
        firstPrice: '',
        lastPrice: '',
        lightThrow: ''
      },
      addRules: {
        templateType: [{ required: true, message: '请选择模板类型', trigger: 'blur' }],
        transportType: [{ required: true, message: '请选择运送类型', trigger: 'blur' }],
        // associatedCity: [{ required: true, message: null, trigger: 'blur' }],
        firstPrice: [{ required: true, message: '首重价格不能为空', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '首重价格必须为数字', trigger: 'blur' }
        ],
        lastPrice: [{ required: true, message: '续重价格不能为空', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '续重价格必须为数字', trigger: 'blur' }
        ],
        lightThrow: [{ required: true, message: '轻抛系数不能为空', trigger: 'blur' }]
      },
      templateTypeOptions: [
        { label: '同城寄', value: '1' },
        { label: '省内寄', value: '2' },
        { label: '经济区互寄', value: '3' },
        { label: '跨省', value: '4' }
      ],
      transportTypeOptions: [
        { label: '普快', value: '1' }
      ]
    }
  },

  methods: {
    addData() {
      this.showDialog = true
    },
    btnOk() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$message.success('很抱歉,演示效果,不能更改')
        } else {
          this.$message({
            type: 'error',
            message: '表单填写不完整,请检查'
          })
        }
      })
    },
    btnCancel() {
      this.$refs.addForm.resetFields()
      this.showDialog = false
    }

  }
}
</script>

<style  lang="scss" scoped>
.transit-container {
  margin-top: 20px;

  span {
    position: absolute;
    bottom: 20px;
    left: 350px;
    color: #bac0cd;
    font-size: 14px;
  }
  .add {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 30px;
    width: 1450px;
    height: 195px;
    background-color: #fff;
    margin: auto;

    .add-template {
      position: absolute;
      top: -80px;
      left: 0px;
      // background-color: #e15536;
    }
    .info {
      display: flex;
      width: 1400px;
      height: 48px;
      background-color: #f8faff;
      justify-content: space-around;
      list-style: none;
      li {
        width: 194px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        color: #818693;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }

}
</style>
